<template>
    <div>
			<!-- <div v-if="chenload"> -->
        <!-- <div class="top">
          <p>昨日收益（元）</p>
          <p>300.00</p>
          <p>累计收益 2000.00元</p>
        </div> -->


					<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
						<div id='dataList0'>
							<div  v-for="(item,index) in tab0.list">
								<div class="con">
								<!-- <div class="con"  @click="khxf(item.uid)"> -->
									<img v-if="item.avatar!=''" :src="item.avatar" alt="">
									<img v-else :src="avatarimg" alt="">
									<div class="name">
										<p>{{item.nickname}}</p>
										<p>ID:{{item.uid}}</p>
									</div>
									<div class="price">
										<div style="width: 100%;float: right;margin-top: .3rem;">
											<p class="gre" v-if="item.type==1||item.type=='1'">永久客户</p>
											<p class="ora" v-else>推广客户</p>
										</div>
										<!-- <p>收益: ¥100.00</p> -->
									</div>
								</div>
								<p style="width: 92%;margin: auto;height: 0.02rem;background: #EDEDED;margin-top: 0.45rem"></p>
							</div>
						</div>
					</mescroll-vue>
				

				<!-- <div class="bto">
					<p @click="tj()">推荐注册</p>
					<p></p>
					<p @click="tixian()">去提现</p>
				</div> -->
      <!-- </div>
			<div class="loadmore" v-else>
			  <img src="static/img/load.gif" alt="">
			</div> -->
    </div>
</template>

<script>
	
	  import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Kehu",
				components: {
				  MescrollVue
				},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						avatarimg:this.$store.state.avatarimg,
            arr:['11','11'],
						allLoaded:false,
						chenload:false,
						feeRecordarr:[],
						page:1,
          }
      },
      methods:{
//           tj(){
//             this.$router.push({
//               path:'/zhuce',
//             })
//           },
// 					tixian(){
// 						this.$router.push({
// 							path:'/tixian'
// 						})
// 					},
// 					khxf(uid){
// 						this.$router.push({
// 							path:'/khxf',
// 							query:{
// 								id:uid
// 							}
// 						})
// 					},
          mescrollInit0 (mescroll) {
					  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
					  this.tab0.mescroll = mescroll;
					},
					
					getMescrollUp (tabType) {
					  let emptyWarpId = 'dataList' + tabType;
					  return {
					    auto: true,
					    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
							   empty: {
							     warpId: emptyWarpId, // 父布局的id;
							     icon: this.imgSrc, // 图标,默认null
							     tip: '您暂未发展任何客户', // 提示
							     
							   },
					  }
					},
					upCallback (page, mescroll) {
					  if (mescroll.tabType === 0) {
					    // 全部
					    this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
							this.axios.get(this.$store.state.url +'User/myRecom',{
								 params:{
									page: page.num,
									limit:page.size
								 }
							 }).then(res=>{
												// console.log(res.data.data.class)
								this.chenload = true;
								if(res.data.errcode==0||res.data.errcode=='0'){
										var curPageData = res.data.data.recom;
										mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
										 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
										 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
										 // this.tab0.list=res.data.data.order
								}
							
							})
					  }
					},
          
      },
			mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
				if(this.$route.query.token){
					// localStorage.setItem('token',this.$route.query.token);
					this.axios.defaults.headers.common['token'] = this.$route.query.token;
				}
				// this.feeRecord(0);
			}
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
    .top{
      width: 100%;
      height: 2.8rem;
      background: url("../../../src/assets/img/person/mykehu.png") no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
    }
    .top p{
      text-align: center;
    }
  .top p:nth-child(1){
    font-size:0.24rem;
    color:rgba(192,221,252,1);
    line-height:0.4rem;
    margin-top: 0.6rem;
  }
  .top p:nth-child(2){
    font-size:0.5rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:0.4rem;
    margin-top: 0.3rem;
  }
  .top p:nth-child(3){
    font-size:0.24rem;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:0.4rem;
    margin-top: 0.2rem;
  }
  .con{
    width: 92%;
    margin: auto;
    margin-top: 0.4rem;
  }
  .con img{
    width:0.86rem;
    height:0.86rem;
    background:rgba(237,237,237,1);
    border-radius:50%;
    float: left;
  }
  .name{
  float: left;
    margin-left: 0.3rem;
  }
  .name p:nth-child(1){
    margin-top: 0.05rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .name p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    margin-top: 0.15rem;
  }
  .price{
    float: right;
  }
  .gre{
    width: 1.2rem;
    float: right;
    text-align: center;
    height:0.32rem;
    background:rgba(88,188,70,1);
    border-radius:0.16rem;
    font-size:0.24rem;
    color:rgba(255,255,255,1);
    line-height:0.32rem;
  }
  .ora{
    width: 1.2rem;
    float: right;
    text-align: center;
    height:0.32rem;
    background:#F97B43;
    border-radius:0.16rem;
    font-size:0.24rem;
    color:rgba(255,255,255,1);
    line-height:0.32rem;
  }
  .price p:nth-child(2){
    font-size:0.26rem;
    color:rgba(51,51,51,1);
    margin-top: 0.5rem;
  }
  .con:after{
    content: '';
    display: block;
    clear: both;
  }
  .bto{
    width: 100%;
    height: 0.95rem;
    background: url("../../../src/assets/img/person/btokefu.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom:0;
  }
  .bto p:nth-child(1){
    width:50%;
    height: 100%;
    text-align: center;
    line-height: 0.95rem;
    font-size:0.36rem;
    font-weight:500;
    color:rgba(51,51,51,1);
    position: absolute;
    left: 0;
  }
    .bto p:nth-child(3){
      width:calc(50% - 0.01rem);
      height: 100%;
      text-align: center;
      line-height: 0.95rem;
      position: absolute;
      right: 0;
      font-size:0.36rem;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
  .bto p:nth-child(2){
    height: 100%;
    width: 0.02rem;
    background: #EDEDED;
    position: absolute;
    left: 50%;
  }
</style>
